{% extends "base.html" %}
{% load i18n %}
{% load static %}
{% load icons %}

{% block content %}
<div class="page-wrapper">
    <!-- Page header -->
    <div class="page-header d-print-none">
      <div class="container-xl">
        <div class="row g-2 align-items-center">
          <div class="col">
            <!-- Page pre-title -->
            <div class="page-pretitle">
              Overview
            </div>
            <h2 class="page-title">
                {% trans "Dashboard" %}
            </h2>
          </div>
          <!-- Page title actions -->
          <div class="col-auto ms-auto d-print-none">
            <div class="btn-list">
              <span class="d-none d-sm-inline">
                <a>
                  <h2><span class="badge bg-orange" style="margin-top:3px">{% trans "Domain" %}</span></h2>
                </a>
              </span>
              <a>
                <div class="mb-2">
                    <select type="text" class="form-select mb-3 tomselected " id="select-countries-valid" value="" tabindex="-1">
                        <option value="hn">海南</option>
                        <option value="gz">广州</option>
                        <option value="tj">天津</option>
                        <option value="hz">杭州</option>
                    </select>
                    
                    {% comment %} <div class="ts-wrapper form-select mb-3 is-valid single full has-items input-hidden" style="display: none;">
                        <div class="ts-control">
                            <div data-value="pl" class="item" data-ts-item="">Poland</div>
                            <input tabindex="0" role="combobox" aria-haspopup="listbox" aria-expanded="false" aria-controls="select-countries-valid-ts-dropdown" id="select-countries-valid-ts-control" type="select-one" data-listener-added_e31c8822="true" aria-activedescendant="select-countries-valid-opt-3" />
                            <div class="dropdown-menu ts-dropdown single" >
                                <div role="listbox" tabindex="-1" class="ts-dropdown-content" id="select-countries-valid-ts-dropdown">
                                    <div data-selectable="" data-value="pl" class="dropdown-item selected" role="option" id="select-countries-valid-opt-1">Poland</div>
                                    <div data-selectable="" data-value="de" class="dropdown-item" role="option" id="select-countries-valid-opt-2">Germany</div>
                                    <div data-selectable="" data-value="cz" class="dropdown-item active" role="option" id="select-countries-valid-opt-3" aria-selected="true">Czech Republic</div>
                                    <div data-selectable="" data-value="br" class="dropdown-item" role="option" id="select-countries-valid-opt-4">Brazil</div>
                                </div>
                            </div>
                        </div>
                    </div> {% endcomment %}
                </a>
              <a href="#" class="btn btn-primary d-sm-none btn-icon" data-bs-toggle="modal" data-bs-target="#modal-report" aria-label="Create new report">
                <!-- Download SVG icon from http://tabler-icons.io/i/plus -->
                <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><line x1="12" y1="5" x2="12" y2="19" /><line x1="5" y1="12" x2="19" y2="12" /></svg>
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- Page body -->
    <div class="page-body">
      <div class="container-xl">
        <div class="row row-deck row-cards">
          <div class="col-sm-6 col-lg-4">
            <div class="card">
                <div class="card-header">
                    <a class="fa fa-linux">&nbsp;&nbsp;&nbsp;&nbsp;</a>
                    <h3 class="card-title">{% trans "Computes" %}</h3>
                </div>
                <div class="card-body">
                    <div class="float-start col-4">
                        <h3>{% trans "Physical Server" %}</h3>
                        <div class="card-value text-green" style="padding-left:20px">{{ comp_count }}</div>
                    </div>
                    <div class="row">
                        <div class="mb-2 col-9 width:10rem">
                            <p class="text-muted"><span class="badge bg-lime badge-pill"></span>&nbsp;{% trans "online" %}：{{ comp_online }} 台</p>
                        </div>
                        <div class="mb-2 col-9 width:10rem">
                            <p class="text-muted"><span class="badge bg-red badge-pill"></span>&nbsp;{% trans "offline" %}：{{ comp_offline }} 台</p>
                        </div>
                    </div>
                </div>
                
                <div class="card-body">
                    <div class="float-start col-4">
                        <h3>{% trans "Cloud Server" %}</h3>
                        <div class="card-value text-green" style="padding-left:20px">{{ inst_count }}</div>
                    </div>
                    <div class="row flex align-center">
                        <div>
                            <div class="mb-2 col-9 width:10rem">
                                <p class="text-muted"><span class="badge bg-lime badge-pill"></span>&nbsp;{% trans "active" %}：{{ instance_acitvecount }} 台</p>
                            </div>
                            <div class="mb-2 col-9 width:10rem">
                                <p class="text-muted"><span class="badge bg-red badge-pill"></span>&nbsp;{% trans "poweroff" %}：{{ instance_closecount }} 台</p>
                            </div>
                            <div class="mb-2 col-9 width:10rem">
                                <p class="text-muted"><span class="badge bg-orange badge-pill"></span>&nbsp;{% trans "paused" %}：{{ instance_pausecount }} 台</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
          </div>
          <div class="col-sm-6 col-lg-4">
            <div class="card">
                <div class="card-header">
                    <a class="fa fa-cubes">&nbsp;&nbsp;&nbsp;&nbsp;</a>
                    <h3 class="card-title">{% trans "Pools" %}</h3>
                </div>
                <div class="card-body">
                    <div class="text-muted mb-4">
                        <span class="fa fa-heart"> {% trans "VCPU" %}: {{ cpu_usage_display }}/{{ vcpu_count }} Core</span>
                        <div class="clearfix">
                            <div class="float-right">
                                <small class="text-muted">{{ cpu_perc }}</small>
                            </div>
                        </div>
                        <div class="progress progress-xs">
                            <div class="progress-bar bg-blue" style="width: {{ cpu_perc }}"></div>
                        </div>
                    </div>
                    <div class="text-muted mb-4">
                        <span class="fa fa-microchip"> {% trans "RAM" %}: {{ mem_usage_display }}/{{ vmem_count_display }} GB</span>
                        <div class="clearfix">
                            <div class="float-right">
                                <small class="text-muted">{{ mem_perc }}</small>
                            </div>
                        </div>
                        <div class="progress progress-xs">
                            <div class="progress-bar bg-green" style="width: {{ mem_perc }}"></div>
                        </div>
                    </div>
                    <div class="text-muted mb-4">
                        <span class="fa fa-database"> {% trans "HDD" %}：{{ blk_usage_display }}/{{ vdsk_count_display }} GB</span>
                        <div class="clearfix">
                            <div class="float-right">
                                <small class="text-muted">{{ disk_perc }}</small>
                            </div>
                        </div>
                        <div class="progress progress-xs">
                            <div class="progress-bar bg-secondary" style="width: {{ disk_perc }}"></div>
                        </div>
                    </div>
                </div>
            </div>
          </div>
          <div class="col-sm-6 col-lg-4">
            <div class="card">
                <div class="card-header">
                    <a class="fa fa-warning">&nbsp;&nbsp;&nbsp;&nbsp;</a>
                    <h3 class="card-title">{% trans "Warning" %}</h3>
                </div>
                <div class="card-body" style="height: 200px; overflow: auto;" id="WarningDiv">
                    
                </div>
            </div>
          </div>
          <div class="col-sm-6 col-lg-12">
            <div class="card">
                <div class="card-header">
                    <a class="fa fa-cloud">&nbsp;&nbsp;&nbsp;&nbsp;</a>
                    <h3 class="card-title">{% trans "Cloud Server" %}</h3>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-hover table-outline table-vcenter text-nowrap card-table" id="mainTable">
                            <thead>
                                <tr>
                                <th class="text-center">{% trans "Name" %}</th>
                                <th class="text-center">{% trans "Status" %}</th>
                                <th class="text-center">{% trans "VCPU" %}</th>
                                <th class="text-center">{% trans "Memory" %}</th>
                                <th class="text-center">{% trans "Sysdisk" %}</th>
                                {% comment %} <th class="text-center">{% trans "IPAddress" %}</th> {% endcomment %}
                                <th class="text-center">{% trans "vCpu Utilization" %}</th>
                                <th class="text-center">{% trans "Ram Utilization" %}</th>
                                <th class="text-center">{% trans "Sysdisk Utilization" %}</th>
                                <th class="text-center">{% trans "Remarks" %}</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for instance in instances  %}
                                <tr>
                                    <td class="sort-name text-center">
                                        <a class="link-primary" href="{% url 'instances:instance' instance.id %}">
                                            {{ instance.name }}
                                        </a>
                                        <br>
                                        <p class="m-0 small font-italic">{{ instance.title }}</p>
                                    </td>
                                    <td class="text-center">
                                        {% if instance.status == 1 %}<span
                                            class="text-success">{% trans "Active" %}</span>{% endif %}
                                        {% if instance.status == 5 %}<span
                                            class="text-danger">{% trans "Off" %}</span>{% endif %}
                                        {% if instance.status == 3 %}<span
                                            class="text-warning">{% trans "Suspended" %}</span>{% endif %}
                                    </td>
                                    <td class="text-center">
                                        {{ instance.vcpu }}
                                    </td>
                                    <td class="text-center">
                                        {{ instance.cur_memory }} MB
                                    </td>
                                    <td class="text-center">
                                        {{ instance.disk }} GB
                                    </td>
                                    {% comment %} <td class="text-center">
                                        192.168.12.21
                                    </td> {% endcomment %}
                                    <td class="text-center">
                                        {{ instance.cpu_usage }}%
                                    </td>
                                    <td class="text-center">
                                        {{ instance.mem_usage }}%
                                    </td>
                                    <td class="text-center">
                                        {{ instance.disk_usage }}%
                                    </td>
                                    <td class="text-center">
                                        {{ instance.remarks }}
                                    </td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
          </div>
  </div>
   
{% endblock content %}
{% block script %}
    <script src="{% static 'dist/js/demo-theme.min.js' %}"></script>
    <link href="{% static 'css/jquery.dataTables.min.css' %}" rel="stylesheet">
    <script type="text/javascript" src="{% static 'js/jquery.dataTables.min.js' %}"></script>

    <script>
        document.addEventListener("DOMContentLoaded", function () {
            var el;
            window.TomSelect && (new TomSelect(el = document.getElementById('select-countries-valid'), {
                copyClassesToDropdown: false,
                dropdownClass: 'dropdown-menu ts-dropdown',
                optionClass:'dropdown-item',
                controlInput: '<input>',
                render:{
                    item: function(data,escape) {
                        if( data.customProperties ){
                            return '<div><span class="dropdown-item-indicator">' + data.customProperties + '</span>' + escape(data.text) + '</div>';
                        }
                        return '<div>' + escape(data.text) + '</div>';
                    },
                    option: function(data,escape){
                        if( data.customProperties ){
                            return '<div><span class="dropdown-item-indicator">' + data.customProperties + '</span>' + escape(data.text) + '</div>';
                        }
                        return '<div>' + escape(data.text) + '</div>';
                    },
                },
            }));
        });
        
        $('#mainTable').DataTable({
            autoWidth:true,////不开启自动宽度，用bootstrap的自适应去调整
            "lengthMenu": [5, 10, 20, 50],//表格行数选择框内数目 显示2条,4条,20条,50条
            "displayLength": 5,//默认的显示行数 (也就是每页显示几条数据)
            "order": [],
            "language": {//自定义语言提示
                "processing": "处理中...",
                "lengthMenu": "显示 _MENU_ 项结果",
                "zeroRecords": "没有找到相应的结果",
                "info": "第 _START_ 至 _END_ 行，共 _TOTAL_ 行",
                "infoEmpty": "第 0 至 0 项结果，共 0 项",
                "infoFiltered": "(由 _MAX_ 项结果过滤)",
                "search": "搜索",
                "infoPostFix": "",
                "url": "",
                "thousands": "'",
                "emptyTable": "表中数据为空",
                "loadingRecords": "载入中...",
                "infoThousands": ",",
                "paginate": {
                    "first": "首页",
                    "previous": "上页",
                    "next": "下页",
                    "last": "末页"
                }
            }
        });

        var divArray = [];

        // 创建一个新的div元素 
        divArray.unshift('<div class="alert alert-warning alert-dismissible" role="alert"><h4 class="alert-title">The instance \'CirrosLinux_4 \' is started failed, the sysdisk is full.</h4><div class="text-muted">Time: 2023-08-25 15:31:12</div></div>');
        divArray.unshift('<div class="alert alert-warning alert-dismissible" role="alert"><h4 class="alert-title">The instance \'CirrosLinux_5 \' is started failed, the sysdisk is full.</h4><div class="text-muted">Time: 2023-08-25 15:31:12</div></div>');  
        divArray.unshift('<div class="alert alert-warning alert-dismissible" role="alert"><h4 class="alert-title">The instance \'CirrosLinux_6 \' is started failed, the sysdisk is full.</h4><div class="text-muted">Time: 2023-08-25 15:31:12</div></div>');  
        // 获取父div元素  
        var parentDiv = document.getElementById('WarningDiv');  
        // 将新的div添加到父div中
        for (var i = 0; i < divArray.length; i++) {
            var newDiv = document.createElement('div');  
            newDiv.innerHTML = divArray[i];
            parentDiv.appendChild(newDiv); 
        }  

        
        </script>
{% endblock script %}
